<template>
	<view style="width:100%;height: 100%;">
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<u-navbar title="工作计划" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>
		<view class="u-page">
			<u-grid :col="3" :border="false">
				<u-grid-item bg-color="#F1F1F5" v-for="(item,index) in planList" :key="index">
					<view class="grid-item-box" @click="goAddPlan(item.value)">
						<u-image :src="item.icon" width="40" height="40" :lazy-load="false" :show-loading="false"
							:fade="false"></u-image>
						<view class="grid-text">{{item.label}}</view>
					</view>
				</u-grid-item>
			</u-grid>

			<view class="coreshop-flex u-flex coreshop-justify-between coreshop-align-center card" @click="goList('1')">
				<view class="coreshop-flex u-flex ml-3">
					<u-image src="/static/images/plan/xie.png" width="35" height="35" :lazy-load="false"
						:show-loading="false" :fade="false"></u-image>
					<view class="ml-2">
						<view class="title">我发布的计划</view>
						<view class="info">累计收到评论 ({{myNum || 0}})</view>
					</view>
				</view>
				<view class="mr-3">
					<u-image src="/static/images/icon/arrow.png" width="15" height="15" :lazy-load="false"
						:show-loading="false" :fade="false"></u-image>
				</view>
			</view>
			<view class="coreshop-flex u-flex coreshop-justify-between coreshop-align-center card" @click="goList('2')">
				<view class="coreshop-flex u-flex ml-3">
					<u-image src="/static/images/plan/yuedu.png" width="35" height="35" :lazy-load="false"
						:show-loading="false" :fade="false"></u-image>
					<view class="ml-2">
						<view class="title">我收到的计划</view>
						<view class="info">累计收到计划 ({{receiveNum || 0}})</view>
					</view>
				</view>
				<view class="mr-3">
					<u-image src="/static/images/icon/arrow.png" width="15" height="15" :lazy-load="false"
						:show-loading="false" :fade="false"></u-image>
				</view>
			</view>
			<view class="coreshop-flex u-flex coreshop-justify-between coreshop-align-center card" @click="goList('3')">
				<view class="coreshop-flex u-flex ml-3">
					<u-image src="/static/images/plan/draft.png" width="35" height="35" :lazy-load="false"
						:show-loading="false" :fade="false"></u-image>
					<view class="ml-2">
						<view class="title">计划草稿箱</view>
						<view class="info">累计草稿 ({{draftNum || 0}})</view>
					</view>
				</view>
				<view class="mr-3">
					<u-image src="/static/images/icon/arrow.png" width="15" height="15" :lazy-load="false"
						:show-loading="false" :fade="false"></u-image>
				</view>
			</view>
			<view class="coreshop-flex u-flex coreshop-justify-between coreshop-align-center card" @click="goList('4')">
				<view class="coreshop-flex u-flex ml-3">
					<u-image src="/static/images/plan/read.png" width="35" height="35" :lazy-load="false"
						:show-loading="false" :fade="false"></u-image>
					<view class="ml-2">
						<view class="title">评阅计划</view>
					</view>
				</view>
				<view class="mr-3">
					<u-image src="/static/images/icon/arrow.png" width="15" height="15" :lazy-load="false"
						:show-loading="false" :fade="false"></u-image>
				</view>
			</view>

		</view>

		<!-- 登录提示 -->
		<coreshop-login-modal></coreshop-login-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				planList: [],
				iconArr: ['/static/images/plan/icon6-dangtian.png', '/static/images/plan/icon5-zhou.png',
					'/static/images/plan/icon4-yue.png', '/static/images/plan/icon1-nian.png',
					'/static/images/plan/icon7-huiyi.png', '/static/images/plan/icon8-qita.png',
					'/static/images/plan/icon9-shangji.png'
				],
				myNum: 0,
				receiveNum: 0,
				draftNum: 0,
			}
		},
		onLoad() {
			this.getWorkPlanType();
		},
		methods: {
			getWorkPlanType() {
				let self = this;
				this.$u.api.getWorkPlanType().then(res => {
					if (res.status) {
						if (res.data != null) {
							self.planList = [];
							res.data.forEach((item, index) => {
								self.planList.push({
									label: item.description,
									value: item.value,
									icon: index > (self.iconArr.length - 1) ? '' : self.iconArr[
										index]
								});
							})
							self.$db.set('workPlanType', self.planList)
						}
					} else {
						this.$u.toast(res.msg)
					}
				});
			},
			goAddPlan(e) {
				if (e == 1) { //当天计划
					uni.navigateTo({
						url: `/pages/member/agent/dayPlanDetail/index`
					})
				} else {
					uni.navigateTo({
						url: `/pages/member/agent/planList/index?planClass=${e}`
					})
				}
			},
			goList(e) {
				if (e == '1' || e == '2') {
					uni.navigateTo({
						url: `/packagePlan/pages/planList/planList?planAuth=${e}`
					})
				}
				if (e == '3') { //草稿箱
					uni.navigateTo({
						url: `/packagePlan/pages/planList/planList?planAuth=3&draft=1`
					})
				}
				if (e == '4') { //评阅计划
					uni.navigateTo({
						url: `/packagePlan/pages/planListSub/planListSub`
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.u-page {
		padding: 33rpx 33rpx 40rpx;

		&::v-deep {
			& {
				.u-grid-item-box {
					padding: 0 !important;
				}
			}
		}
	}

	.grid-text {
		font-size: 24rpx;
		color: #7A808A;
		margin-top: 16rpx;
	}

	.title {
		font-size: 28rpx;
		color: #333;
	}

	.info {
		font-size: 24rpx;
		color: #7A808A;
	}

	.grid-item-box {
		width: 214rpx;
		height: 160rpx;
		margin: 7rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
	}

	.card {
		border: 1px solid #F7F7F7;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		height: 130rpx;
		margin-top: 20rpx;
	}

	.mr-3 {
		margin-right: 30rpx;
	}

	.ml-2 {
		margin-left: 20rpx;
	}

	.ml-3 {
		margin-left: 30rpx;
	}
</style>